<!DOCTYPE html>
<html lang="en">

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
  <!-- Basic Page Needs
 ================================================== -->
  <meta charset="utf-8" />
  <title>WEGnologyMS</title>
  <!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">-->

  <!--[if lt IE 9]>
  <script src="js/html5.js"></script>
  <![endif]-->

  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!--[if IE 7]>
  <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
  <![endif]-->
  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="ico/favicon.ico">


	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<link href="css/jquery.css" rel="stylesheet">
	
	<script src="js/jquery.js"></script>
	<script src="js/jquery_002.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.jqdock.js"></script>
	
	<style>
		div.inbox {
			background-color: #0a58c0;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.inbox:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.organization {
			background-color: #2a74f3;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.organization:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.newDocument {
			background-color: #009a01;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.newDocument:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.myDocs {
			background-color: #019aac;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.myDocs:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.mySearches {
			background-color: #ff8b00;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.mySearches:hover {
			opacity:0.50;
			-moz-opacity: 0.50;
			filter: alpha(opacity=50);
		}
		
		div.advancedSearch {
			background-color: #d9532d;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.advancedSearch:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.training {
			background-color: #a100a8;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.training:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.reports {
			background-color: #7F2F2D;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.reports:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
		div.processes {
			background-color: #5a38b3;
		 	height: 100px; width: 32%; float: left; display: table-column; color: white;
		}
		div.processes:hover {
			opacity:0.65;
			-moz-opacity: 0.65;
			filter: alpha(opacity=65);
		}
		
	</style>
	

</head>

<body>

	<div>
		<div class="container-fluid">

			<div id="header"></div>

			<div id="mainContainer" class="row-fluid" style="background-image: url('img/wallpapers/7.jpg');">
			
			<div class="span1">
				&nbsp;
			</div>
						
			<div id="blocks" class="span10">
				<table style="width: 100%; margin-top: 50px;">
					<tbody>
						<tr>
							<td >
								<div>
									<!-- inicio linha 1 -->
									<div style="height: 110px;">

										<!-- inicio coluna 1 -->
										<a href="inbox.html">
										<div class="inbox">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
														<span
															style="font-size: 18px; color: white;"><i
															class="icon-envelope-alt"></i>&nbsp; Minhas Tarefas
														</span>
												</h4>
												
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Visualizar atividades pendentes.</p>
												</div>
											</div>
										</div>
										</a>
										<!-- fim coluna 1 -->

										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>

										<!-- inicio coluna 2 -->
										<a href="selectTemplate.html">
										<div class="newDocument">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
													<span
														style="font-size: 18px; color: white;"><i
														class="icon-plus-sign"></i>&nbsp; Criar
														Conteúdo</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Incluir novos documentos,
														normas e conteúdos WEGnology.</p>
												</div>
											</div>
										</div>
										</a>
										<!-- fim coluna 2 -->

										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>

										<!-- inicio coluna 3 -->
										<a href="advancedSearch.html">
										<div class="advancedSearch">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
													<span
														style="font-size: 18px; color: white;">
														<i class="icon-zoom-in"></i>&nbsp; Pesquisa Avançada</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Pesquisar documentos apartir
														de campos específicos.</p>
												</div>
											</div>
										</div>
										</a>


										<!-- fim coluna 3 -->

									</div>
									<!-- fim linha 1 -->


									<!-- inicio linha 2 -->
									<div style="height: 110px;">

										<!-- inicio coluna 1 -->
										<a href="list.html">
										<div class="myDocs">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
														<span
														style="font-size: 18px; color: white;">
														<i class="icon-folder-open"></i>&nbsp; Meus Documentos</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Listar meus documentos
														marcados como favorito.</p>
												</div>
											</div>
										</div>
										</a>

										<!-- fim coluna 1 -->

										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>
											
										<!-- inicio coluna 2 -->
											<a href="processes.html">
											<div class="processes">
												<div style="padding: 10px; color: white;">
													<h4
														style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
														<span
															style="font-size: 18px; color: white;">
															<i class="icon-sitemap"></i>&nbsp; 
															Processos</span>
													</h4>
													<div style="clear: both; color: white;"></div>
													<p style="margin-left: 15px; color: white;"></p>
													<div style="color: white;">
														<p style="color: white;">Visualizar documentos por processos de negócio.</p>
													</div>
												</div>
											</div>
											</a>
										<!-- fim coluna 2  -->
										
										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>
											
										<!-- inicio coluna 3  -->
											
										<a href="organizationUnits.html">
										<div class="organization" >
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px;">
														<span
														style="font-size: 18px; color: white;">
														<i class="icon-group"></i>&nbsp; Organização</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Visualizar documentos
														por empresa, departamento e seção.</p>
												</div>
											</div>
										</div>
										</a>

										<!-- fim coluna 3 -->

									</div>
									<!-- fim linha 2 -->

									<!-- inicio linha 3 -->
									<div style="height: 110px;">

										<!-- inicio coluna 1 -->
										<a href="searchList.html">
										<div class="mySearches">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
														<span
														style="font-size: 18px; color: white;">
														<i class="icon-list-ul"></i>&nbsp; Minhas Pesquisas</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Gerenciar e executar minhas
														pesquisas salvas.</p>
												</div>
											</div>
										</div>
										</a>
										<!-- fim coluna 1 -->

										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>

										<!-- inicio coluna 2 -->
										<a href="reports.html">
										<div class="reports">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
													<span
														style="font-size: 18px; color: white;">
														<i class="icon-file-alt"></i>&nbsp; 
														Relatórios</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Gerar relatórios 
														dos fluxos de trabalho e documentos.</p>
												</div>
											</div>
										</div>
										</a>
										<!-- fim coluna 2 -->

										<div
											style="float: left; display: table-column; color: white; width: 1%;">
											&nbsp;</div>
											
										<!-- inicio coluna 3 -->
										<a href="training.html">
										<div class="training">
											<div style="padding: 10px; color: white;">
												<h4
													style="margin-top: -3px; color: white; padding-top: 5px; height: 27px; ">
													<span
														style="font-size: 18px; color: white;">
														<i class="icon-facetime-video"></i>&nbsp; Treinamentos</span>
												</h4>
												<div style="clear: both; color: white;"></div>
												<p style="margin-left: 15px; color: white;"></p>
												<div style="color: white;">
													<p style="color: white;">Assistir materiais e
														documentos de treinamento.</p>
												</div>
											</div>
										</div>
										</a>

										<!-- fim coluna 3 -->


									</div>
									<!-- fim linha 3 -->
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				
			</div>
			
			<div class="span1">
				&nbsp;
			</div>	
			
			<div class="pull-right">
				<a style="text-decoration:none" href="javascript:trocaWallpaper('prev');">
					<i style="color:#d4d0c8; font-size:25px" class="icon-angle-left"></i>&nbsp;
				</a>
				<a style="text-decoration:none" href="javascript:trocaWallpaper('next');">
					<i style="color:#d4d0c8; font-size:25px" class="icon-angle-right"></i>&nbsp;
				</a>
			</div>

			</div>
				
		</div>
	</div>

	<div id="footer"></div>


	<script>
		$('#header').load('header.html');
		$('#footer').load('footer.html');
		
		$(document).ready(function(){
			
			var headerHeight = $('#header').height();
			var footerHeight = $('#footer').height();
			var windowHeight = $(window).height();
			
			var mainContainerHeight =  windowHeight - headerHeight - footerHeight - 50;
			
			$('#mainContainer').height(function(){
				   return mainContainerHeight;
			});
			
		});
		
		function trocaWallpaper(operacao){
			// TODO: retornar via ajax, de acordo com a operacao
			var image = "img/wallpapers/1.jpg";
			if (operacao == 'next'){
				image = "img/wallpapers/6.jpg";
			}
			$('#mainContainer').css("background-image", "url("+image+")");  
		}		
		
	</script>


</body>
</html>